<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>金融项目制作</title>

    <link href="lib/dist/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/style.css">


  
  </head>
  <body>   

    <!--header的制作：topbar navbar  -->
    <section id="header">
      <!-- 1.创建一个topbar -->
      <div class="topbar hidden-sm hidden-xs">
          <div class="container">
              <div class="row">
                  <div class="col-xs-2 text-center">
                    <a href="#" class="mobile-link">
                         <span class="glyphicon glyphicon-phone"></span>
                         <span>手机微金所</span>
                         <span class="glyphicon glyphicon-chevron-down"></span>
                         <img src="img/c_06.jpg" alt="">
                    </a>
                  </div>

                  <div class="col-xs-5 text-center">
                    <span class ="glyphicon glyphicon-phone-alt"></span>
                    <span> 4006-89-4006（服务时间：9:00-21:00）</span>
                  </div>

                  <div class="col-xs-2 text-center">
                    <a href="#">常见问题</a>
                    <a href="#">财富登录</a>
                  </div>

                  <div class="col-xs-3 text-center">
                    <a href="#" class="btn btn-red btn-sm">免费注册</a>
                    <a href="#" class="btn btn-link">登录</a>
                  </div>
              </div>
          </div>
      </div>
    
    <!-- 2.navBar -->
      <nav class="navbar navbar-weiwei" role="navigation" style="margin-bottom: 0px;">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- LOGO -->
            <a class="navbar-brand" href="#">
              <span class="icon-logo"></span>
              <span class="icon-weijinsuo"></span>


            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">我要借款</a></li>
              <li><a href="#">我要投资</a></li>
              <li><a href="#">平台介绍</a></li>
              <li><a href="#">新手专区</a></li>
              <li><a href="#">最新动态</a></li>
              <li><a href="#">微论坛</a></li>
            
            </ul>
            
            <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
              <li><a href="#">个人中心</a></li>
            </ul>

          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>




    </section>
     

     <section id="lunbo" >
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- 导航点 -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
          </ol>

          <!-- 图片区域 -->
          <div class="carousel-inner" role="listbox">
            <div class="item active" style="background-image: url(img/hongbaochang.jpg);">
              <img src="img/hongbao.jpg" alt="...">
            </div>
            <div class="item" style="background-image: url(img/xiaorenwuchang.jpg);">
              <img src="img/xiaorenwu.jpg" alt="...">
            </div>
            <div class="item" style="background-image: url(img/jinrongchang.jpg);">
              <img src="img/jinrong.jpg" alt="...">
            </div>
            <div class="item" style="background-image: url(img/lansechang.jpg);">
              <img src="img/lanse.jpg" alt="...">
            </div>

          </div>
          <!-- 左右箭头 -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> 
     </section>


     
    <!-- 特色板块 -->
    <section id="tese" class="hidden-xs">
      <div class="container">
        <div class="row">
          
          <!-- 封装一个 -->
          <a href="#" class="col-sm-6  col-md-4 ">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>

          <a href="#" class="col-sm-6 col-md-4">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>

          <a href="#" class="col-sm-6 col-md-4">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>

          <a href="#" class="col-sm-6 col-md-4">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>

          <a href="#" class="col-sm-6 col-md-4">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>

          <a href="#" class="col-sm-6 col-md-4">
              <div class="media">
           
                <div class="media-left">
                  <span class="glyphicon glyphicon-upload"></span>
                </div>  
                
                <div class="media-body">
                  <h4 class="media-heading">支付交易保障</h4>
                  <p>银联支付全程保障安全</p>
                </div>
              </div>

          </a>
        </div>
      </div>
    </section>

    <section id="lianxi">
      <div class="container">
        <p class="pull-left">
          <i class="glyphicon glyphicon-download"></i>
          现在有<span>458</span>人在排队，累计预约交易成功<span>7409</span>次。 什么是预约投标？ 
          <a href="#">立即预约</a>
        </p>
        <p class="pull-right hidden-sm hidden-xs">
          <a href="#">
           <i class="glyphicon glyphicon-th-large"></i>
            微金所企业宣传片
          </a>
        </p>
      </div>
    </section>
  
     <!-- 产品推荐 -->
    <section id= "products">

      <div class="container">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#product_01" role="tab" data-toggle="tab">特别推荐</a></li>
            <li role="presentation"><a href="#product_02" role="tab" data-toggle="tab">微销宝</a></li>
            <li role="presentation"><a href="#product_03" role="tab" data-toggle="tab">微投资</a></li>
            <li role="presentation"><a href="#product_04" role="tab" data-toggle="tab">微消费</a></li>

            <li class="pull-right hidden-xs hidden-sm"><a href="#">更多</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="product_01">
              <div class="row">
                  
                  <div class="col-xs-12 col-sm-6 col-md-4">
                      <div class="panel panel-product">
                        <div class="panel-heading">
                          <p><strong>8</strong>%</p>
                          <p>年利率</p>

                        </div>
                        <div class="panel-body">
                          <h4>新手体验表0008期</h4>
                          <div class="row">
                            <div>
                              <p>起步价</p>
                              <p>1个亿</p>
                            </div>
                            <div></div>
                            <div></div>
                            <div></div>

                          </div>
                        </div>
                      </div>
                  </div>

                  <div class="col-xs-12 col-sm-6 col-md-4">
                      <div class="panel panel-product">
                        <div class="panel-heading">
                          <p><strong>8</strong>%</p>
                          <p>年利率</p>

                        </div>
                        <div class="panel-body">
                          <h4>新手体验表0008期</h4>
                        </div>
                      </div>
                  </div>

                  <div class="col-xs-12 col-sm-6 col-md-4">
                      <div class="panel panel-product">
                        <div class="panel-heading">
                          <p><strong>8</strong>%</p>
                          <p>年利率</p>

                        </div>
                        <div class="panel-body">
                          <h4>新手体验表0008期</h4>
                        </div>
                      </div>
                  </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="product_02">...</div>
            <div role="tabpanel" class="tab-pane" id="product_03">...</div>
            <div role="tabpanel" class="tab-pane" id="product_04">...</div>
          </div>


      </div>
      
      
    </section>



    <script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" ></script>
    <script src="lib/dist/js/bootstrap.min.js" type="text/javascript" ></script>
  </body>
</html>